<template>
  <div v-if="!hidden" :class="[calcClass, 'yv-aggrid-wrap',
          hiLightSelectedRow?'hi-light-selected-row':'',
          allowVerticalLine?'allow-vertical-line':''
        ]" :style="calcStyle">
    <ag-grid-vue
        v-bind="gridOption"
        :class="['ag-theme-alpine', 'yv-aggrid']"
        :columnDefs="columnDefs"
        :rowData="rowData"
    />
  </div>
</template>
<script>
import _ from 'lodash'
import {AgGridVue} from "ag-grid-vue3"
import 'ag-grid-enterprise'
import "ag-grid-community/styles/ag-grid.css"
import "ag-grid-community/styles/ag-theme-alpine.css"
import WebVjsonMix from "../WebVjsonMix";

export default {
  mixins: [WebVjsonMix],
  components: {
    AgGridVue: AgGridVue
  },
  data() {
    return {
      hidden: false,
      hiLightSelectedRow: this.vjson.hiLightSelectedRow ?? true,
      allowVerticalLine: this.vjson.allowVerticalLine ?? true,
      gridOption: {
        enableCellTextSelection: false,
        ensureDomOrder: false,
        enableRangeSelection: true,
        suppressContextMenu: false,

        suppressPropertyNamesCheck: true,
        suppressMaxRenderedRowRestriction: true,
        animateRows: false,
        suppressAggFuncInHeader: true,
        // suppressColumnMoveAnimation: true,
        // rowSelection: 'single', // multiple
        rowSelection: 'single',
        // enableRangeSelection: true,
        rowData: [],
        headerHeight: 38,
        maxHeight: this.vjson.maxHeight,
        minHeight: this.vjson.minHeight,
        groupDefaultExpanded: this.vjson.groupDefaultExpanded ?? -1,
        popupParent: document.querySelector("body"),
        defaultColDef: {
          editable: false,
          singleClickEdit: false,
          sortable: true,
          resizable: true,
          enableRowGroup: true,
          enablePivot: true,
          enableValue: true,
          filter: true,
        },
        showOpenedGroup: true,
      },
      columnDefs: [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"},
      ],
      rowData: [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxster", price: 72000},
      ],
    };
  },
};
</script>

<style lang="less">
:root {
  --grid-row-height: 34px;
}

.yv-aggrid-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;

  .title {
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .yv-aggrid.ag-theme-alpine {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    & > .ag-root-wrapper {
      flex-grow: 1;
      border: none
    }

    .ag-header-cell {
      background: var(--aggrid-header-bg-color);
      border-bottom-color: #f0f0f0;

      .ag-header-cell-text {
        font-weight: 600;
        font-size: 14px;
        color: #000000e0
      }

      .ag-header-cell-menu-button:not(.ag-header-menu-always-show) {
        opacity: 1
      }
    }

    .ag-root-wrapper {
      /*border:0;*/
    }

    .ag-row {
      font-weight: 600;
      font-size: 14px;
      transition: all .3s ease;
      border-color: #ebeef5;

      .ag-cell-last-left-pinned {
        padding: 0;

        .ag-cell-wrapper {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .ag-selection-checkbox {
            margin-right: 3px
          }
        }
      }
    }

    .ag-row-odd {
      background: none;
    }

    .ag-pinned-left-header {
      border-right-color: #ebeef5;
    }

    .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
      border-right-color: #ebeef5;
    }

    .ag-row.ag-row-hover {
      background: #fafafa;
    }

    .ag-row-selected::before {
      background: #fafafa;
    }

    .ag-row-hover:not(.ag-full-width-row)::before {
      background: #fafafa;
    }

    .ag-header-icon {
      color: #b8b8b8
    }

    .ag-icon.ag-icon-menu {
      font-size: 15px;
      font-family: FontAwesome;

      &:before {
        content: '\f0b0';
      }
    }

    .ag-header {
      border-bottom-color: #ebeef5;
    }
  }

  &.allow-vertical-line .ag-cell-value {
    border-right: 1px solid #ebeef5;
  }

  .yv-aggrid-wrap .yv-aggrid .ag-cell-inline-editing {
    height: var(--grid-row-height);
  }

  .yv-aggrid .ag-header-cell, .yv-aggrid .ag-header-group-cell, .yv-aggrid .ag-ltr .ag-cell {
    font-size: 14px;
    font-weight: 300;
    color: #000000e0
  }

  .yv-aggrid .ag-cell, .yv-aggrid .ag-full-width-row .ag-cell-wrapper.ag-row-group {
    line-height: var(--grid-row-height);
  }

  .yv-aggrid .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
    /*height: 30px;*/
  }

  .yv-aggrid .ag-cell-inline-editing {
    height: var(--grid-row-height);
  }

  .yv-aggrid .ag-header-cell, .yv-aggrid .ag-header-group-cell {
    padding-left: 9px;
    padding-right: 9px;
  }

  .yv-aggrid .ag-cell, .yv-aggrid .ag-full-width-row .ag-cell-wrapper.ag-row-group {
    padding-left: 5px;
    padding-right: 5px;

    &.ag-cell-inline-editing {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .ag-grid-pagination {
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 0 5px 0;
    background: var(--secondary-menu-bg-color);
    /*border-top: 1px solid var(--frist-border-color);*/
    overflow: hidden;
    margin-top: 3px;
    box-shadow: 0px -1px 3px rgba(0, 0, 0, .2);

    .btns {
      display: flex;
      flex-direction: row;
      white-space: nowrap;

      .el-button {
        padding: 5px;
        background: #f5f4f5;
        border: 1px solid #dcdcdc;
        margin-left: 6px;
        border-radius: 0;

        &:not(.is-disabled):hover, &:not(.is-disabled):focus {
          background: #e9e9e9;
          color: #000
        }

        span {
          font-size: 18px;
        }
      }

      .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover {
        background: #f5f4f5;
        color: #d5d5d5
      }

      .el-input__wrapper {
        border-radius: 0;
      }

      .line {
        width: 1px;
        background: #d0d0d0;
        margin: 0 8px;
        height: 20px;
        position: relative;
        top: 6px
      }

      .page {
        color: var(--el-text-color-primary);
        font-size: 14px;
        margin: 0 5px;

        input {
          width: 40px;
          height: 24px;
          margin: 0 5px;
          border: 1px solid var(--el-border-color);
          text-align: center;

          &:hover, &:focus {
            outline: none;
          }
        }
      }

      .no-margin {
        margin: 0;
      }

      .el-select {
        width: 65px;
        margin-left: 5px
      }
    }

    .total {
      font-size: 14px;
      color: #4b4c4c;
      line-height: 24px;
      margin-right: 5px;
      white-space: nowrap;

      span {
        margin-left: 5px
      }
    }
  }
}

.yv-aggrid-wrap.hi-light-selected-row .yv-aggrid.ag-theme-alpine .ag-row-selected::before {
  background: var(--el-color-primary-light-8); // #dde6f8;
}

.ag-popup-child {
  z-index: 2315;
}
</style>